<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
			/* 练习：1.圆形 2.正三角形
			思路1：宽高与边框倒角一致
			思路2：div#triangle   css中：抓div#d1 左边框50像素 实线红色
														  右边框50像素 实线黄色
														  下边框50像素实线黑色
			  注意：先别加宽高 transprent 透明色
			*/
		   div#circle{
			   width: 400px;
			   height: 400px;
			   border:1px solid red;
			   border-radius: 50%;
			   /* 边框阴影 box-shadow 属性 */
			   box-shadow: 5px 5px 50px 5px red inset;
		   }
		   div#triangle{
			   width: 0px;
		   	   /* border-left: 50px solid transparent; 
		   	    border-right: 50px solid transparent; 
		   	    border-bottom: 50px solid black;*/
				/* 两行:倒三角，蓝色，透明度 .3
				提醒:所有边框:50px solid transparent
				上边框颜色改成蓝色: 0,0,255
				*/
			   border: 50px solid transparent;
			   border-top-color: rgba(0,0,225,.3) ;
		   }
		   /* outline 边框轮廓 */
		   input{
			   outline: 1px solid red;
		   }
		   /*实际应用：通配选择器 去掉轮廓
			{ outline：0}
			
			*/
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		边框：<input type="text")
	</body>
</html>